<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      inited: false
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        if (!this.inited) {
          this.initChart()
          this.inited = true
        } else {
          this.setOptions(val)
        }
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ dateList, idenList, enterpriseList, enterpriseDataList } = {}) {
      var xData = (function() {
        var data = []
        for (var i = 1; i < 13; i++) {
          data.push(i + '月份')
        }
        return data
      }())

      var option = {
        tooltip: {
          'trigger': 'axis',
          'axisPointer': {
            'type': 'shadow',
            textStyle: {
              color: '#fff'
            }

          }
        },
        grid: {
          'borderWidth': 0,
          'top': 40,
          'bottom': 30,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: ['标识注册量', '标识解析量'] //, '标识存量'
        },
        xAxis: [{
          'type': 'category',
          'axisLine': {
            lineStyle: {
              color: '#90979c'
            }
          },
          'splitLine': {
            'show': false
          },
          'axisTick': {
            'show': false
          },
          'splitArea': {
            'show': false
          },

          'data': dateList
        }],
        yAxis: [{
          nameTextStyle: {
            color: '#000'
          },
          name: '',
          'type': 'value',
          'splitLine': {
            'show': false
          },
          'axisLine': {
            lineStyle: {
              color: '#90979c'
            }
          },
          'axisTick': {
            'show': false
          },
          'axisLabel': {
            'interval': 0

          },
          'splitArea': {
            'show': false
          }

        }],
        series: [
          {
            'name': '标识注册量',
            'type': 'bar',
            'stack': '总量',
            'barMaxWidth': 20,
            'barGap': '10%',
            'itemStyle': {
              'normal': {
                'color': 'rgba(153, 153, 51, 1)',
                'label': {
                  'show': true,
                  'textStyle': {
                    'color': '#fff'
                  },
                  'position': 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? (p.value) : ''
                  }
                }
              }
            },
            'data': idenList
          },

          /*      {
            "name": "标识存量",
            "type": "bar",
            "stack": "总量",
            "itemStyle": {
              "normal": {
                "color": "rgba(0, 204, 255, 1)",
                barBorderRadius : [ 50, 50, 0, 0],
                "label": {
                  "show": true,
                  "textStyle": {
                    "color": "#fff"
                  },
                  "position": "inside",
                  formatter: function(p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            "data":enterpriseList
          },*/
          {
            'name': '标识解析量',
            'type': 'bar',
            symbolSize: 10,
            symbol: 'none',
            'itemStyle': {
              'normal': {
                'color': '#979797',
                barBorderRadius: [30, 30, 0, 0],
                'label': {
                  'show': true,
                  'position': 'top',
                  formatter: function(p) {
                    return p.value > 0 ? (p.value) : ''
                  }
                }
              }
            },
            'data': enterpriseDataList
          }
        ]
      }
      this.chart.setOption({
        xAxis: {
          data: dateList,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#aaa'
          },
          axisLine: {// x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.4)',
              width: 1,
              type: 'solid'
            }
          }
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#aaa'
          },
          axisLine: {// x轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: 'rgb(101,157,255)',
              width: 1,
              type: 'solid'
            }
          }
        },
        legend: {
          data: ['标识注册量', '标识解析量'], //, '标识存量'
          right: 50
        },
        series: [
          {
            name: '标识注册量',
            itemStyle: {
              normal: {
                color: '#7a54f6',
                lineStyle: {
                  color: '#7a54f6',
                  width: 3
                }
              }
            },
            label: {
              show: false,
              position: 'top'
            },
            smooth: true,
            symbolSize: 7,
            type: 'line',
            data: idenList,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          /* {
          name: '标识存量',
          smooth: true,
          symbolSize: 7,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          label: {
            show: false,
            position: 'top',
          },
          data: enterpriseList,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        },*/
          {
            name: '标识解析量', itemStyle: {
              normal: {
                color: '#f65469',
                lineStyle: {
                  color: '#f65469',
                  width: 3
                }
              }
            },
            label: {
              show: false,
              position: 'top'
            },
            smooth: true,
            symbolSize: 7,
            type: 'line',
            data: enterpriseDataList,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
      }
      )
    }

  }
}
</script>
